<template>
  <div class="p-4">
    <div class="mb-6">
      <h2 class="text-xl font-bold mb-4">WireGuard Interfaces</h2>
      <button @click="refreshInterfaces" class="px-4 py-2 bg-green-500 text-white rounded mb-4">
        Refresh Interfaces
      </button>
      
      <div v-if="interfaces.length > 0" class="grid gap-4">
        <div v-for="iface in interfaces" :key="iface.name" 
             class="p-4 bg-white shadow rounded border border-gray-200">
          <div class="flex justify-between items-center">
            <div>
              <h3 class="font-semibold">{{ iface.name }}</h3>
              <p class="text-sm text-gray-600">Address: {{ iface.address }}</p>
              <span :class="statusClass(iface.status)">
                {{ iface.status }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <div v-else class="text-gray-500 text-center py-4">
        No WireGuard interfaces found
      </div>
    </div>

    <div class="mt-6">
      <button @click="testVpnCreation" class="px-4 py-2 bg-blue-500 text-white rounded">
        Test VPN Creation
      </button>
      <pre class="mt-4 p-4 bg-gray-100 rounded">{{ result }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { invoke } from '@tauri-apps/api/core'

const interfaces = ref([])
const result = ref('')

const refreshInterfaces = async () => {
  try {
    interfaces.value = await invoke('cmd_get_wireguard_interfaces')
    await invoke('setup_wireguard_interface')
  } catch (error) {
    console.error('Failed to get interfaces:', error)
    interfaces.value = []
  }
}

const testVpnCreation = async () => {
  const config = {
    name: 'wg0',
    prvkey: 'AAECAwQFBgcICQoLDA0OD/Dh0sO0pZaHeGlaSzwtHg8=',
    address: '10.6.0.30',
    port: 12345,
    peers: [
      {
        public_key: '000102030405060708090a0b0c0d0e0ff0e1d2c3b4a5968778695a4b3c2d1e0f',
        endpoint: '10.10.10.10:55001',
        persistent_keepalive_interval: 25,
        allowed_ips: ['10.6.0.0/24', '192.168.22.0/24'],
      },
    ],
    mtu: null,
  }

  try {
    const response = await invoke('create_wireguard_vpn', { config })
    result.value = JSON.stringify(response, null, 2)
  } catch (error) {
    result.value = `Error: ${error}`
  }
}

const statusClass = (status) => {
  return {
    'px-2 py-1 rounded text-sm': true,
    'bg-green-100 text-green-800': status === 'active',
    'bg-red-100 text-red-800': status !== 'active',
  }
}

onMounted(() => {
  refreshInterfaces()
})
</script>

<style scoped>
/* Add any component-specific styles here */
</style>
